<script setup>
import { reactive } from 'vue';
import { useRoute } from 'vue-router';
import DetailBar from "@/components/DetailBar.vue"
import Loading from "@/components/Loading.vue"
import http from "@/utils/http"

import useNightModeStore from "@/stores/nightModeStore";
const nightModeStore=useNightModeStore();


const route=useRoute();//获取当前路由对象
let storyid=route.params.storyid;//从路由对象里面获取参数
let story=reactive({story:null,storyextra:{comments:0,popularity:0}});   
http.get(`/story/${storyid}`).then(result=>{
    story.story=result.data.story;
});
http.get(`/story/${storyid}/extra`).then(re=>{
    story.storyextra=re.data;

});

</script>
<template>
    <div v-if="story.story">
        <div class="headline">
            <img :src="story.story.image"/>
            <div :style="{background:`linear-gradient(to top,${story.story.imageHue.replace('0x','#')},rgba(255,255,255,0.2))`}">
            <h1>{{ story.story.title }}</h1>
        </div>
        </div>
        <div>
        </div>
      
     <div :class="[nightModeStore.isNight?'night':'']" v-html="story.story.body" ></div>
    </div>
    <div class="loadingbox" v-else>
        <Loading />
    </div>
    <DetailBar :extra="story.storyextra" :storyid="parseInt(storyid)"/>
    
</template>
<style scoped>
.loadingbox{
    margin-top: 250px;
    
}
.headline{
    position: relative;
}
.headline img{
    width: 100%;
    height: auto;
}
.night{
    background-color: #555;
    color:#fff;
}
.headline div{
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0px;
    /* background-color: rgba(255, 0, 0,0.2); */
    display: flex;
    align-items: center;
}
.headline div h1{
    padding: 0px 20px;
    line-height: 30px;
    font-size: 16px;
    color: white;
    font-family: "微软雅黑","宋体","正楷";
    font-weight: normal;
}
:deep(.meta){
    padding: 30px 20px;
    font-size: 13px;
}
/*：deep()一般用在动态内容*/
:deep(.meta .avatar){
    display: none;
}
:deep(.meta .bio){
    display: none;
}
/*查看知乎*/
:deep(.meta .originUrl){
    display: inline;
    color: rgb(15,164,232);
    font-weight: bold;
}
:deep(.content){
    padding: 0px 20px;
    font-size: 13px;
    font-family: "微软雅黑";
    line-height: 26px;
    width: calc(100%-40px);
    overflow: hidden;
}
:deep(.content img){
    max-width: 100%;/*最大百分之百*/
    height: auto;
}

:deep(.content p){
    text-indent: 2em;
}
:deep(.view-more){
    text-align: center;
    font-size: 13px;
}
</style>